<template>
  <div class="search-container">
    <!-- 搜索框部分 -->
    <div class="flex flex_p">
      <div class="search">
        <i class="search-icon"><van-icon name="search" size="20px" /></i>
        <input class="search-text" v-model="keyword" @keyup.enter="debtoshopo" @keydown="keydownHandler"
          @input="emits('update:keyword', ($event.target as HTMLInputElement).value)" />
      </div>
      <div class="Cancel" @click="toback">取消</div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import searchApi from '@/api/search';
const router = useRouter();
const props = defineProps<{
  keyword: string,
}>()
const keyword = ref(props.keyword)
const _stat_search = 'userhand'

let historyList = JSON.parse(localStorage.getItem('history')!) ? JSON.parse(localStorage.getItem('history')!) : []


const emits = defineEmits<{
  (e: 'update:keyword', str: string): void
  (e: 'throRealfu'): void;
}>()
// console.log(props.keyword);

//数据
// const _stat_search = 'userhand'//路由跳转携带证明输入

// const show = ref(false)//控制实时输入显示隐藏


// console.log(keyword.value);



//输入实时数据
// async function getRealTimeData() {
//   // console.log(keyword.value);
//   //组装数据
//   let keywordPrefix = keyword.value
//   // console.log(keywordPrefix);
//   if (keywordPrefix) {
//     try {
//       let result = await searchApi.reqGetsearchrealtime(keywordPrefix)
//       // console.log(result);
//       realTime.value = result
//       show.value = true;
//       emits('isShow', show.value)
//     } catch (error) {
//       console.log(error)
//     }
//   } else {
//     realTime.value = []
//     show.value = false;
//     emits('isShow', show.value)
//   }
// }





//取消
function toback() {
  router.back()
}


//回车搜索
//  function debtoshopoenter(){
//   emits('debtoshopoto')
//  }

//回车防抖
function debtoshopo() {
  // console.log(555);
  debuouce(toshop, 700)()

}

//防抖
function debuouce(fn: () => any, delay: number) {

  var timer: any;
  return function () {
    // console.log(22);
    clearTimeout(timer)
    timer = setTimeout(fn, delay)
  }
}

//回车去商品页 搜索
function toshop() {
  let his = []
  // console.log(111);
  if (historyList.length > 9) {
    historyList.pop()
  }
  if (!(historyList.includes(keyword.value))) {
    his.push(keyword.value, ...historyList)
  } else {
    his.push(...historyList)
  }
  localStorage.setItem('history', JSON.stringify(his))
  //路由跳转
  router.push({
    path: `/toshop`,
    query: {
      keyword: keyword.value,
      _stat_search,
    }
  })
}


//实时搜索
function keydownHandler() {
  emits('throRealfu')
}
</script>

<style scoped lang="less">
.search-container {
  .flex_p {
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.4rem;

    .search {
      width: 302px;
      height: 28px;
      //   line-height: 28px;
      font-size: 14px;
      color: #666;
      background-color: #EDEDED;
      border-radius: 3px;

      .search-icon {
        height: 28px;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
        float: left;
      }

      .search-text {
        width: 240px;
        background: #eee;
        float: left;
        margin-top: 7px;
        border: 0;
      }
    }

    //取消
    .Cancel {
      background-color: #fff;
      font-size: 14px;
      width: 37px;
      height: 20px;
      margin-left: 10px;
      border-radius: 4px;
      color: #333;
    }

    //历史记录
  }

  //实时数据


}
</style>